<template>
  <div class="home">
    <div class="layout" v-if="!$route.meta.isFull">
      <Layout>
        <Sider
          ref="menuSlider"
          hide-trigger
          collapsible
          :collapsed-width="78"
          v-model="isCollapsed"
          style="position: relative"
        >
          <Menu
            active-name="1"
            theme="light"
            width="auto"
            :class="menuitemClasses"
            style="height: calc(100% - 50px); overflow-y: auto"
          >
            <div class="layout-title">
              <logo></logo>
              <!-- <div class="l-select">{{ shortName }}</div> -->
            </div>
            <div v-for="(i, index) in itemArr" :key="index">
              <MenuItem
                :name="i.name"
                v-show="i.name !== '会员管理'"
                :to="i.url"
              >
                <Icon :type="i.type"></Icon>
                <span>{{ i.name }}</span>
              </MenuItem>
              <Submenu v-show="i.name == '会员管理'">
                <template #title>
                  <Icon :type="i.type" />
                  {{ i.name }}
                </template>
                <MenuItem
                  v-for="(item1, index1) in i.children"
                  :key="index1"
                  :name="item1.name"
                  :to="item1.url"
                  v-show="item1.resource"
                  >{{ item1.name }}</MenuItem
                >
              </Submenu>
            </div>
          </Menu>
          <Row
            type="flex"
            justify="center"
            align="middle"
            class="login-out"
            :class="{ 'collapsed-menu': isCollapsed }"
            style="
              border-right-width: 1px;
              border-right-color: #dcdee2;
              border-right-style: solid;
            "
          >
            <div @click="loginOut()">
              <i class="iconfont icon-zhuxiao"></i>
              <span>安全退出</span>
            </div>
          </Row>
        </Sider>
        <Layout style="background-color: #fff">
          <Row
            class="layout-header-bar"
            type="flex"
            justify="start"
            align="middle"
            :style="changeWid"
          >
            <Icon
              @click.native="collapsedSider"
              :class="rotateIcon"
              :style="{ margin: '0 20px' }"
              type="md-menu"
              size="24"
            ></Icon>
            <Row type="flex" justify="space-between" class="layout-header-tool">
              <Row type="flex" align="middle">
                <Icon
                  :type="$route.meta.icon"
                  class="layout-header-span"
                ></Icon>
                <span style="font-size: 16px">{{ $route.name }}</span>
                <Button
                  icon="ios-trash"
                  style="margin-left: 15px"
                  v-show="closePageUrl !== ''"
                  @click="closePage"
                  >关闭当前页面</Button
                >
              </Row>
              <Row type="flex" align="middle">
                <Dropdown @on-click="selectItems">
                  <Icon type="md-contact" color="#ccc" size="30" />
                  <DropdownMenu slot="list">
                    <DropdownItem name="password">修改密码</DropdownItem>
                    <DropdownItem name="exit">安全退出</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
                <!--                <span class="iconfont icon-return layout-header-span"></span>-->
                <!--                <span class="iconfont icon-refresh layout-header-span" style="padding-right: 25px;"></span>-->
              </Row>
            </Row>
          </Row>
          <Content
            style="
              margin-top: 84px;
              margin-left: 30px;
              margin-right: 30px;
              margin-bottom: 30px;
            "
          >
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </div>
    <ChangeAccountPwd
      :showPsdModal="isShowPsdModal"
      :idx="0"
      @savePwdModal="isShowPsdModal = false"
      @closeModal="isShowPsdModal = false"
    ></ChangeAccountPwd>
    <router-view v-if="$route.meta.isFull"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import logo from "@/component/logo.vue";
import Cookies from "js-cookie";
import { authBloc } from "@/store/module/Auth";
import { store } from "@/store/Store";
import { routerConfig } from "@/config/RouterConfig";
import { Resources } from "@/base/Resources";
import { Validation } from "@/base/Validation";
import ChangeAccountPwd from "@/component/ChangeAccountPwd.vue";

@Component({
  components: { logo, ChangeAccountPwd }
})
export default class extends Vue {
  $refs!: {
    menuSlider: any;
  };

  isCollapsed: boolean = false;
  isShowPsdModal: boolean = false;
  itemArrAll = [
    {
      name: "管理中心",
      type: "ios-settings",
      url: "/home",
      resource: true, // 默认模块
    },
    {
      name: "数据大屏",
      type: "md-contacts",
      url: "/dataScreen",
      resource: Validation.check(Resources.SCREEN)
    },
    {
      name: "品牌商管理",
      type: "md-contacts",
      url: "/company",
      resource: Validation.check(Resources.COMPANY)
    },
    {
      name: "后台用户",
      type: "logo-android",
      url: "/account",
      resource: Validation.check(Resources.ACCOUNT)
    },
    {
      name: "角色权限",
      type: "ios-copy",
      url: "/role",
      resource: Validation.check(Resources.ROLE)
    },
    {
      name: "订单管理",
      type: "ios-cart",
      url: "/order",
      resource: Validation.check(Resources.ORDERMANAGE)
    },
    {
      name: "会员管理",
      type: "md-chatbubbles",
      url: "/member",
      resource: Validation.check(Resources.MEMBER),
      children: [
        {
          url: "/member",
          name: "会员信息",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_INFO),//MEMBER_LEVEL
        },
        {
          url: "/member/lv",
          name: "会员等级",
          type: "ios-copy",
          resource: Validation.check(Resources.MEMBER_LEVEL),//MEMBER_RULE
        },
        {
          url: "/member/rule",
          name: "成长值规则",
          type: "ios-copy",
          resource: Validation.check(Resources.MEMBER_RULE),// MEMBER_ECHARTS
        },
        {
          url: "/member/data",
          name: "图表统计",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_ECHARTS),// MEMBER_ECHARTS
        },// /statistics
        {
          url: "/statistics",
          name: "积分统计",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_POINT),// MEMBER_ECHARTS
        },
        {
          url:"/healthcopy",
          name: "健康档案",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_HEALTH_DATA),// MEMBER_ECHARTS
        },
        {
          url:'/brainwave',
          name: "脑波管理",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_BRAIN_WAVES),// MEMBER_ECHARTS
        }
      ]
    },
    {
      name: "评价管理",
      type: "ios-quote",
      url: "/evaluation",
      resource: Validation.check(Resources.EVALUTION)
    },
    {
      name: "产品分类",
      type: "md-grid",
      url: "/product",
      resource: Validation.check(Resources.PRODUCT)
    },
    {
      name: "设备分类",
      type: "md-grid",
      url: "/device",
      resource: Validation.check(Resources.DEVICE_SORT)
    },
    {
      name: "设备管理",
      type: "md-bookmarks",
      url: "/device-manage/devices",
      resource: Validation.check(Resources.DEVICE)
    },
    {
      name: "升级栏目",
      type: "md-arrow-round-up",
      url: "/apk",
      resource: Validation.check(Resources.VERSION_UPDATE)
    },
    {
      name: "经销商管理员",
      type: "md-chatbubbles",
      url: "/agents",
      resource: Validation.check(Resources.ACCOUNT)
    },
    {
      name: "经销商管理",
      type: "md-clipboard",
      url: "/agent",
      resource: Validation.check(Resources.AGENT)
    },
    {
      name: "消息推送",
      type: "md-checkbox",
      url: "/news/list",
      resource: Validation.check(Resources.NEWS)
    },
    {
      name: "资讯管理",
      type: "ios-list-box-outline",
      url: "/info",
      resource: Validation.check(Resources.INFO)
    },
    // {
    //     name: '音乐管理',
    //     type: 'md-musical-notes',
    //     url: '/music',
    //     resource: true
    // },
    {
      name: "签到管理",
      type: "md-calendar",
      url: "/signlog/list",
      resource: Validation.check(Resources.SIGN_LOG)
    },
    {
      name: "资源位管理",
      type: "md-images",
      url: "/banners/nav/banner",
      resource: Validation.check(Resources.BANNERS)
    },
    {
      name: "标签管理",
      type: "ios-pricetags-outline",
      url: "/label",
      resource: Validation.check(Resources.LABEL_SORT)
    },
    {
      name: "抽奖活动管理",
      type: "md-appstore",
      url: "/activity",
      resource: Validation.check(Resources.ACTIVITY)
    },
    {
      name: "优惠券管理",
      type: "md-cash",
      url: "/coupons",
      resource: Validation.check(Resources.COUPON)
    },
    {
      name: "家庭管理",
      type: "ios-people",
      url: "/family",
      resource: Validation.check(Resources.AFFILIATE)
    },
    // {
    //     name: '敏感词管理',
    //     type: 'md-calendar',
    //     url: '/sensitive',
    //     resource: Validation.check(Resources.SENSITIVE),
    // },
    // {
    //     name: '评论管理',
    //     type: 'ios-pricetags-outline',
    //     url: '/commentmanagement',
    //     resource: Validation.check(Resources.AFFILIATE)
    // },
    //sensitive
    {
      name: "社区管理",
      type: "md-images",
      url: "/management",
      resource: Validation.check(Resources.COMMUNITY)
    },
    {
      name: "管家服务",
      type: "md-call",
      url: "/service/nav/maintain",
      resource: Validation.check(Resources.POSTSALE)
    },
    {
      name: "问卷调查",
      type: "ios-help-circle-outline",
      url: "/questionnaire",
      resource: Validation.check(Resources.QUESTIONNAIRE_VIEW)
    },
    {
      name: "操作日志",
      type: "md-clipboard",
      url: "/operationlog",
      resource: Validation.check(Resources.OPERATION)
    },
    {
      name: "白名单",
      type: "md-paper",
      url: "/whitelist",
      resource: Validation.check(Resources.WHITELIST_VIEW)
    }
  ];
  itemArrAllAgent = [
    {
      name: "管理中心",
      type: "ios-settings",
      url: "/home",
      resource: true
    },
    {
      name: "数据大屏",
      type: "md-contacts",
      url: "/dataScreen",
      resource: Validation.check(Resources.SCREEN)
    },
    {
      name: "品牌商管理",
      type: "md-contacts",
      url: "/company",
      resource: Validation.check(Resources.COMPANY)
    },
    {
      name: "后台用户",
      type: "logo-android",
      url: "/account",
      resource: Validation.check(Resources.ACCOUNT)
    },
    {
      name: "角色权限",
      type: "ios-copy",
      url: "/role",
      resource: Validation.check(Resources.ROLE)
    },
    {
      name: "订单管理",
      type: "ios-cart",
      url: "/order",
      resource: Validation.check(Resources.ORDERMANAGE)
    },
    {
      name: "会员管理",
      type: "md-chatbubbles",
      url: "/member",
      resource: Validation.check(Resources.MEMBER),//MEMBER_LEVEL
      children: [
        {
          url: "/member",
          name: "会员信息",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_INFO),//MEMBER_LEVEL
        },
        {
          url: "/member/lv",
          name: "会员等级",
          type: "ios-copy",
          resource: Validation.check(Resources.MEMBER_LEVEL),//MEMBER_LEVEL
        },
        {
          url: "/member/rule",
          name: "成长值规则",
          type: "ios-copy",
          resource: Validation.check(Resources.MEMBER_RULE),//MEMBER_RULE
        },
        {
          url: "/member/data",
          name: "图表统计",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_ECHARTS),// MEMBER_ECHARTS
        },// /statistics
        {
          url: "/statistics",
          name: "积分统计",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_POINT),// MEMBER_ECHARTS
        },
        {
          url:"/healthcopy",
          name: "健康档案",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_HEALTH_DATA),// MEMBER_ECHARTS
        },
        {
          url:'/brainwave',
          name: "脑波管理",
          type: "logo-android",
          resource: Validation.check(Resources.MEMBER_BRAIN_WAVES),// MEMBER_ECHARTS
        }
      ]
    },
    {
      name: "评价管理",
      type: "md-chatbubbles",
      url: "/evaluation",
      resource: Validation.check(Resources.EVALUTION)
    },
    {
      name: "产品分类",
      type: "md-grid",
      url: "/product",
      resource: Validation.check(Resources.PRODUCT)
    },
    {
      name: "设备分类",
      type: "md-grid",
      url: "/device",
      resource: Validation.check(Resources.DEVICE_SORT)
    },
    {
      name: "设备管理",
      type: "md-bookmarks",
      url: "/device-manage/devices",
      resource: Validation.check(Resources.DEVICE)
    },
    {
      name: "经销商管理员",
      type: "md-chatbubbles",
      url: "/agents",
      resource: Validation.check(Resources.ACCOUNT)
    },
    {
      name: "经销商管理",
      type: "md-clipboard",
      url: "/agent",
      resource: Validation.check(Resources.AGENT)
    },
    {
      name: "消息推送",
      type: "md-checkbox",
      url: "/news/list",
      resource: Validation.check(Resources.NEWS)
    },
    {
      name: "资讯管理",
      type: "ios-list-box-outline",
      url: "/info",
      resource: Validation.check(Resources.INFO)
    },
    // {
    //     name: '音乐管理',
    //     type: 'md-musical-notes',
    //     url: '/music',
    //     resource: true
    // },
    {
      name: "签到管理",
      type: "md-calendar",
      url: "/signlog/list",
      resource: Validation.check(Resources.SIGN_LOG_VIEW)
    },
    {
      name: "资源位管理",
      type: "md-images",
      url: "/banners/nav/banner",
      resource: Validation.check(Resources.BANNERS)
    },
    {
      name: "标签管理",
      type: "ios-pricetags-outline",
      url: "/label",
      resource: Validation.check(Resources.LABEL_SORT)
    },
    {
      name: "抽奖活动管理",
      type: "md-appstore",
      url: "/activity",
      resource: Validation.check(Resources.ACTIVITY)
    },
    {
      name: "优惠券管理",
      type: "md-cash",
      url: "/coupons",
      resource: Validation.check(Resources.COUPON)
    },
    {
      name: "家庭管理",
      type: "ios-people",
      url: "/family",
      resource: Validation.check(Resources.AFFILIATE)
    },
    {
      name: "管家服务",
      type: "md-call",
      url: "/service/nav/maintain",
      resource: Validation.check(Resources.POSTSALE)
    },
    {
      name: "社区管理",
      type: "md-images",
      url: "/management",
      resource: Validation.check(Resources.COMMUNITY)
    },
    {
      name: "问卷调查",
      type: "ios-help-circle-outline",
      url: "/questionnaire",
      resource: Validation.check(Resources.QUESTIONNAIRE_VIEW)
    },
    {
      name: "操作日志",
      type: "md-clipboard",
      url: "/operationlog",
      resource: Validation.check(Resources.OPERATION)
    },
    {
      name: "白名单",
      type: "md-paper",
      url: "/whitelist",
      resource: Validation.check(Resources.WHITELIST_VIEW)
    }
  ];

  get activeName() {
    if (this.$route.matched.length === 3) {
      return this.$route.matched[1].name;
    } else {
      return this.$route.name;
    }
  }

  get itemArr() {
    if (store.state.user.tepee === "1") {
      return this.itemArrAll.filter(x => x.resource);
    } else {
      return this.itemArrAllAgent.filter(x => x.resource);
    }
  }

  get rotateIcon() {
    return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
  }

  get changeWid() {
    return this.isCollapsed ? { width: "calc(100% - 78px)" } : {};
  }

  get menuitemClasses() {
    return ["menu-item", this.isCollapsed ? "collapsed-menu" : "layout-i"];
  }

  get shortName() {
    return store.state.user.company.company.shortName || "iRest";
  }

  get closePageUrl() {
    return store.state.prePath.url;
  }

  collapsedSider() {
    this.$refs.menuSlider.toggleCollapse();
  }

  loginOut() {
    this.$Modal.confirm({
      title: "提示",
      content: "确认要退出登录吗？",
      okText: "确定",
      cancelText: "取消",
      onOk: () => {
        Cookies.remove("accessToken");
        authBloc.logout();
        this.$router.push({ path: "/login" });
      }
    });
  }

  changePsdModal() {
    this.isShowPsdModal = !this.isShowPsdModal;
  }

  selectItems(val) {
    if (val === "password") {
      this.changePsdModal();
    }
    if (val === "exit") {
      this.loginOut();
    }
  }

  closePage() {
    this.$router.push(this.closePageUrl || "/");
  }

  mounted() {
    console.log(this.activeName, "dasdasldkas");
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
}

.icon-setting {
  font-size: 30px;
  background: #0079fe;
  color: #fff;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
}

.layout {
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  border-radius: 4px;
  overflow: hidden;
}

.layout-header-bar {
  width: calc(100% - 200px);
  position: fixed;
  z-index: 1;
  background: #fff;
  padding: 0;
  height: 64px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
  position: relative;
}

.menu-icon {
  transition: all 0.3s;
}

.rotate-icon {
  transform: rotate(-90deg);
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0;
  display: none;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.layout-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;

  .l-select {
    color: #0079fe;
    font-size: 18px;
    padding: 15px 0;
  }
}

.layout-header-tool {
  width: calc(100% - 64px);
  color: #999;
}

.layout-header-span {
  padding: 0 10px;
  font-size: 20px;
  font-weight: bold;
}

// .layout-i .ivu-menu-item > i {
//   padding-left: 20px;
// }

.login-out {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #ddd;
  color: #666;
  font-size: 14px;

  .icon-zhuxiao {
    padding-right: 5px;
  }
}

.login-out:hover {
  color: #0079fe;
  transition: all 0.5s;
  cursor: pointer;
}

// .ivu-dropdown {
//   margin: 0 20px;
// }
</style>
